<template>
	<view>
		<view class="container">
			<!-- 选择圈子 -->
			<view v-if="isShowShowTopic" class="choose-topic" @click="chooseTopic">
				<image class="icon" src="/static/topic-1.png"></image>
				<text>发布到圈子</text>
				<text class="tips">{{topicName|| "请选择"}}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<!-- 选择板块分区 -->
			<view v-if="calssList.length > 0" class="class-wrap">
				<view class="title">板块分区</view>
				<scroll-view scroll-x style="width: calc(100vw - 180rpx)">
					<view class="class-list">
						<view class="class-item" :class="index == classIndex ? 'class-active' : ''"
							@click="chooseClass(item, index)" v-for="(item, index) in calssList" :key="index">
							{{ item.name }}
						</view>
					</view>
				</scroll-view>
			</view>
			<textarea placeholder="这一刻的想法..." @blur="inputBlur" :focus="inputFocus" :auto-height="true"
				:show-confirm-bar="false" maxlength="-1" v-model="form.content" class="post-textarea"></textarea>
			<!-- 上传媒体 -->
			<q-upload ref="ossUpload" @success="onSubmit"></q-upload>
		</view>
		<!-- 工具栏 -->
		<view class="tool-wrap" :style="[toolStyle]">
			<!-- 所在位置 -->
			<view @click="chooseLocation" class="tool-item">
				<u-icon name="map-fill" size="30rpx"></u-icon>
				<text class="txt u-line-1">{{ form.address || '位置' }}</text>
			</view>
			<view @click="onUpload" class="submit-btn">发布</view>
		</view>
	</view>
</template>

<script>
	import form from '../../uni_modules/uview-ui/libs/config/props/form';

	export default {
		data() {
			return {
				toolStyle: {},
				mediaList: [],
				form: {
					topic_id: '',
					class_id: '',
					topic_class_id: '',
					content: '',
					media: [],
					longitude: 0,
					latitude: 0,
					address: ''
				},
				discussList: [],
				inputCursor: 0,
				inputFocus: true,
				inputDiscussName: '',
				calssList: [],
				classIndex: null,
				page: 1,
				topicId: null,
				topicName: null,
				isShowShowTopic: false
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo;
			}
		},
		onLoad(options) {
			this.form.class_id = options.class_id;

			if (options.topic_id) {
				this.topicId = options.topic_id;
			} else {
				this.isShowShowTopic = true
			}

			if (options.dis_id) {
				this.form.discuss_id = options.dis_id;
			}

			let location = uni.getStorageSync('location_info');
			this.form.longitude = location.longitude;
			this.form.latitude = location.latitude;

			this.onKeyboardChange();
			this.getTopicClass();
		},
		onShow() {
			if (!this.userInfo) {
				this.$store.dispatch('mnpLogin');
			}
		},
		methods: {
			chooseTopic() {
				uni.navigateTo({
					url: "/pages/topic/choose-topic"
				})
			},
			chooseClass(e, index) {
				this.classIndex = index;
				this.form.topic_class_id = e.id;
			},
			getTopicClass() {
				this.$H
					.get('topic/postClassList', {
						topic_id: this.topicId
					})
					.then((res) => {
						this.calssList = res.result;
					});
			},
			onSubmit(e) {
				let that = this;
				let fileList = [];
				e.forEach((item) => {
					if (item.url) {
						fileList.push(item.url);
					}
				});

				this.form.content = this.form.content.replace(/#(.*?)#/g, '');

				this.form.media = fileList;
				this.form.topic_id = this.topicId;

				this.$H.post('post/release', this.form).then((res) => {
					if (res.code == 200) {
						// #ifdef MP-WEIXIN
						wx.requestSubscribeMessage({
							tmplIds: [that.$c.replyTmplId],
							complete() {
								uni.reLaunch({
									url: '/pages/index/index'
								});
							}
						});
						// #endif

						// #ifdef H5
						uni.reLaunch({
							url: '/pages/index/index'
						});
						// #endif

						this.$H.post('post/checkPostImg', {
							post_id: res.result.id
						});
					}
					uni.hideLoading();
				});
			},
			inputBlur(event) {
				this.inputCursor = event.detail.cursor;
				this.inputFocus = false;
			},
			onUpload() {
				if (!this.form.content) {
					this.$u.toast('内容不能为空');
					return;
				}

				this.$refs.ossUpload.upload();

				uni.showLoading({
					mask: true,
					title: '发布中'
				});
			},
			chooseLocation() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						that.form.address = res.name;
						that.form.latitude = res.latitude;
						that.form.longitude = res.longitude;
					}
				});
			},
			onKeyboardChange() {
				uni.onKeyboardHeightChange((res) => {
					this.toolStyle = {
						bottom: res.height + 'px'
					};
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.post-textarea {
		width: calc(100% - 40rpx);
		padding: 20rpx 0;
		background-color: #f5f5f5;
		border-radius: 20rpx;
		min-height: 300rpx;
		margin: 20rpx 0;
		padding: 20rpx;
	}

	.tool-wrap {
		display: flex;
		background-color: #f5f5f5;
		padding: 30rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9;

		.tool-item {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			font-size: 28rpx;
			padding: 10rpx 20rpx;
			line-height: 1;
			border-radius: 100rpx;
			margin-right: 10rpx;

			.icon {
				width: 30rpx;
				height: 30rpx;
				display: block;
			}

			.txt {
				margin-left: 10rpx;
			}
		}

		.submit-btn {
			margin-left: auto;
			font-size: 28rpx;
			background-color: $themes-color;
			padding: 20rpx 40rpx;
			border-radius: 100rpx;
			line-height: 1;
			white-space: nowrap;
			color: #fff;
		}
	}

	.class-wrap {
		display: flex;
		margin: 30rpx 0;

		.title {
			font-size: 28rpx;
			color: #999;
			margin-right: 20rpx;
			white-space: nowrap;
		}

		.class-list {
			display: flex;
			align-self: center;

			.class-item {
				margin-right: 20rpx;
				background-color: #eee;
				font-size: 24rpx;
				line-height: 1;
				padding: 10rpx 20rpx;
				border-radius: 100rpx;
				white-space: nowrap;
			}

			.class-active {
				background-color: $themes-color;
				color: #fff;
			}
		}
	}

	.choose-topic {
		background-color: #f5f5f5;
		padding: 20rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;

		.tips {
			margin-left: auto;
			color: #616161;
			font-weight: bold;
		}

		.icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}
</style>